<template>
	<view class="active" v-show="isShow">
		<van-nav-bar title="微信授权" left-arrow @click-left="onClickLeft" />
		<view class="profilePhoto">
			<image class="imgLogo" src="../../static/img/logo.png" mode=""></image>
		</view>
		<view class="hintBox">
			<text class="hint">申请获取你的公开信息(昵称、头像等)</text>
		</view>
		<!-- 需要使用 button 来授权登录 -->
		<view class="loginBtn">
			<button class="btn" wx:if="canIUse" open-type="getUserInfo" @getuserinfo="getUserInfo">微信用户授权</button>
			<view wx:else>请升级微信版本</view>
		</view>
		<van-dialog id="van-dialog" />
		<view class="zhuanBox">
			<text class="txt">登录/注册即表示您已阅读、理解并同意</text>
			<navigator class="link" url="../myPage/regards/privacy/privacy">《诸安科技隐私政策》</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canIUse: wx.canIUse('button.open-type.getUserInfo'),
				isShow: true
			}
		},
		onLoad: function() {
			var thit = this;
			wx.getSetting({
				success(res) { //获取权限列表，
					if (res.authSetting['scope.userInfo']) { //判断用户信息权限是否授权，为真--已授权
						thit.isShow = false; //页面不显示
						uni.navigateTo({ //直接跳转home页面
							url: '../home/home',
						})

					}
				}
			})
		},
		methods: {
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			getUserInfo: function(e) {
				var that = this;
				wx.getSetting({ //调用此微信方法，看用户信息权限是否授权
					success(res) { //获取信息权限列表，
						if (res.authSetting['scope.userInfo']) { //判断用户信息权限是否授权，为真--已授权
							wx.getUserInfo({ // 已经授权，可以直接调用 getUserInfo 获取用户信息（头像昵称等）
								success(res) { //获取用户信息成功的回调函数 
									that.NickName = res.userInfo.nickName;
									that.HeadImg = res.userInfo.avatarUrl;
									uni.setStorage({
										key: 'nicheng',
										data: res.userInfo.nickName,
										success: function() {
											console.log('昵称存储成功');
										}
									});
									uni.setStorage({
										key: 'touxiang',
										data: res.userInfo.avatarUrl,
										success: function() {
											console.log('头像存储成功');
										}
									});
									uni.navigateTo({
										url: '../home/home'
									})
								},
								fail(fl) {
									uni.showToast({
										title: '获取用户失败',
										icon: 'loading'
									})
								}
							})
						}
						// else { //为假--未授权
						// 	console.log("未授权=====")
						// 	this.showSettingToast("请授权") //未授权-显示设置轻提示
						// }
					}
				});

			},
			// 打开权限设置页提示框
			showSettingToast: function(e) { //显示设置轻提示的函数
				wx.showModal({
					title: '提示信息',
					confirmText: '去设置微信授权',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							wx.switchTab({
								url: '../home/home',
							})
						}
					}
				})
			},
		}
	}
</script>

<style>
	.hintBox {
		text-align: center;
	}

	.profilePhoto {
		width: 130upx;
		height: 130upx;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 150upx;
		text-align: center;
		overflow: hidden;
	}

	.hint {
		font-size: 14px;
		text-align: center;
	}

	.imgLogo {
		width: 76%;
		height: 84%;
	}

	.headBox {
		width: 150upx;
		height: 150upx;
		margin: 0 auto;
		margin-top: 20%;
		margin-buttom: 60upx;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid #f0f0f0;
	}

	.nameBox {
		text-align: center;
	}

	.loginBtn {
		margin-top: 20px;
	}

	.btn {
		width: 90%;
		height: auto;
		background-color: #04BE02;
		color: #fff;
		border: 0px solid #fff;
	}

	.zhuanBox {
		text-align: center;
		width: 250px;
		font-size: 14px;
		position: absolute;
		left: 50%;
		bottom: 80px;
		transform: translate(-50%, 0);
	}

	.link {
		color: #007AFF;
	}
</style>
